﻿<template>
  <div class="single-row-layout-block">
    <div
      v-for="(item, index) in list"
      :key="item._id"
      class="list-dome"
      :style="{
        'margin-right': getMarginRight(index),
        'margin-left': getMarginLeft(index),
      }"
    >
      <img
        :id="'img_' + item._id"
        class="list-dom-img"
        :style="{ 'box-shadow': getBoxShadow, 'border-radius': getRadius }"
        :src="item.image ? item.image : defaultImg"
        @click="navigateTo(item)"
        @load="loadImage(item)"
      />
      <a
        v-for="area in item.hotAreaList"
        :id="'a' + '_' + item._id + '_' + area._id"
        :key="area._id"
        class="hot-area-block"
        @click="navigateTo(area)"
      ></a>
    </div>
  </div>
</template>

<script>
import MixIn from '../../MixIn/index'
export default {
  name: 'SingleRow',
  mixins: [MixIn],
  methods: {
    getMarginRight (index) {
      if (index < this.list.length - 1) {
        if (this.pageData.imageGutter < 2) {
          return this.pageData.imageGutter + 'px'
        }
        return this.pageData.imageGutter / 2 + 'px'
      } else {
        return 0
      }
    },
    getMarginLeft (index) {
      if (index > 0) {
        if (this.pageData.imageGutter < 2) {
          return 0
        }
        return this.pageData.imageGutter / 2 + 'px'
      } else {
        return 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.single-row-layout-block {
  display: flex;
  .list-dome {
    margin-bottom: 0px;
    flex-grow: 1;
    .list-dom-img {
      width: 100%;
      display: block;
    }
  }
  .hot-area-block {
    position: absolute;
    display: block;
  }
}
</style>
